<template>
  <div class="chat-container">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <i class="el-icon-arrow-left"></i>
      <div class="title">我的药房</div>
      <div class="notification-icon">🔔</div>
    </div>
    <!--    按钮-->
    <div class="nav-headers">
      <div class="titles" @click="commonlyUsedDrugs()">常用药品</div>
      <div class="titles" @click="commonPrescription1()">常用处方</div>
      <div class="titles" @click="historicalPrescription()">历史处方</div>
    </div>

    <!--    常用药品-->
    <div v-if="myPharmacy == 1">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.restorativesId }}</span>
            </template>
          </el-table-column>
          <el-table-column width="180">
            <template slot-scope="scope">
              <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.picture"></el-image>
            </template>
          </el-table-column>
          <el-table-column width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.drugName }}</span>
            </template>
          </el-table-column>
          <el-table-column width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}元</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!--    常用处方-->
    <div v-if="myPharmacy == 2">
      <div class="card-list">
        <el-button @click="newPrescription()">新建处方</el-button>
        <div v-for="item in cardList" :key="item.patientId" class="card-item" @click="commonPrescription(item.prescriptionId)">
          <!-- 卡片左侧 -->
          <div class="card-left">
            <div class="card-desc">临床诊断: {{ item.diagnosis }}</div>
          </div>
        </div>
      </div>
    </div>

    <!--    历史处方-->
    <div v-if="myPharmacy == 3">
      <div class="card-list">
        <div v-for="item in cardList2" :key="item.patientId" class="card-item" @click="HistoricalPrescription(item.id)">
          <!-- 卡片左侧 -->
          <div class="card-left">
            <div class="card-info">
              <span class="info-item">{{ item.name }}</span>
              <span class="info-item">{{ item.sex }}</span>
              <span class="info-item">{{ item.age }}</span>
            </div>
            <div class="card-desc">临床诊断: {{ item.diagnosis }}</div>
          </div>
        </div>
      </div>
    </div>

    <!--    常用药品详情-->
    <el-dialog title="常用药品详情" :visible.sync="dialogVisibleCommonlyUsedDrugs">
      <el-form label-width="80px" :model="formLabelAlignCommonlyUsedDrugs">
        <el-form-item label="图片">
          {{formLabelAlignCommonlyUsedDrugs.picture}}
        </el-form-item>
        <el-form-item label="药品名称">
          {{formLabelAlignCommonlyUsedDrugs.drugName}}
        </el-form-item>
        <el-form-item label="价格">
          {{formLabelAlignCommonlyUsedDrugs.price}}
        </el-form-item>
        <el-form-item label="药品说明:">
          {{formLabelAlignCommonlyUsedDrugs.drugDescription}}
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisibleCommonlyUsedDrugs = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisibleCommonlyUsedDrugs = false">确 定</el-button>
    </el-dialog>
    <!--    常用处方详情-->
    <el-dialog title="常用处方详情" :visible.sync="dialogVisibleCommonPrescription">
      <el-form label-width="80px" :model="formLabelAlignCommonPrescription">
        <el-form-item label="诊断">
          {{formLabelAlignCommonPrescription.diagnosis}}
        </el-form-item>
        <el-form-item label="药品">
          {{formLabelAlignCommonPrescription.drugName}}
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisibleCommonPrescription = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisibleCommonPrescription = false">确 定</el-button>
    </el-dialog>
    <!--    历史处方详情-->
    <el-dialog title="历史处方详情" :visible.sync="dialogVisibleHistoricalPrescription">
      <el-form label-width="80px" :model="formLabelAlignHistoricalPrescription">
        <el-form-item label="患者姓名">
          {{formLabelAlignHistoricalPrescription.name}}
        </el-form-item>
        <el-form-item label="患者年龄">
          {{formLabelAlignHistoricalPrescription.sex}}
        </el-form-item>
        <el-form-item label="患者性别">
          {{formLabelAlignHistoricalPrescription.age}}
        </el-form-item>
        <el-form-item label="诊断名称:">
          {{formLabelAlignHistoricalPrescription.diagnosis}}
        </el-form-item>
        <el-form-item label="药品名称">
          {{formLabelAlignHistoricalPrescription.drugNames}}
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisibleHistoricalPrescription = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisibleHistoricalPrescription = false">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>


import {listOfCommonDrugs} from "../../../api/doctorTerminal/myPharmacy/commonlyUsedDrugs";
import {commonPrescription} from "../../../api/doctorTerminal/myPharmacy/commonPrescription";
import {listOfHistoricalPrescriptions} from "../../../api/doctorTerminal/myPharmacy/historicalPrescription";
import {detailsOfCommonDrugs} from "../../../api/doctorTerminal/myPharmacy/writeAPrescription";

export default {
  name: 'CardList',
  data() {
    return {
      // 常用药品详情对象
      formLabelAlignCommonlyUsedDrugs: {
        // 图片
        picture:'',
        // 药品名称
        drugName:'',
        // 价格
        price:'',
        // 药品说明
        drugDescription:'',
      },
      // 常用处方详情对象
      formLabelAlignCommonPrescription: {
        // 诊断
        diagnosis:'',
        // 药品
        drugName:'',
      },
      // 历史处方详情对象
      formLabelAlignHistoricalPrescription: {
        name: '',
        sex: '',
        age: 0,
        diagnosis: '',
        drugNames: '',
      },
      // 常用药品对话框
      dialogVisibleCommonlyUsedDrugs: false,
      // 常用处方对话框
      dialogVisibleCommonPrescription: false,
      // 历史处方对话框
      dialogVisibleHistoricalPrescription: false,
      // 列表
      tableData: [],
      // 变量
      myPharmacy: 1,
      // userId
      doctorId: this.$store.state.user.id,
      // 常用处方列表
      cardList: [],
      // 历史处方列表
      cardList2: [],
      // 从问诊跳转的id
      id: 0
    }
  },
  created() {
    this.getDataDrug()
    this.getDataCommonPrescription()
    this.aa()
  },
  methods: {
    // 判断是否是跳转过来的
    aa() {
       if (this.$route.query.id)
       {
         this.myPharmacy = 2
         console.log("this.myPharmacy: ", this.myPharmacy)
       }
    },
    // B端 我的药房 常用药列表
    getDataDrug() {
      listOfCommonDrugs(this.doctorId).then(res =>{
        console.log("B端 我的药房 常用药列表: ", res)
        this.tableData = res
      })
    },
    // B端 我的药房 常用处方列表
    getDataCommonPrescription() {
      commonPrescription(this.doctorId).then(res => {
        console.log("B端 我的药房 常用处方列表: ", res)
         this.cardList = res
      })
    },
    // B端 我的药房 历史处方列表
    getDataListOfHistoricalPrescriptions() {
      listOfHistoricalPrescriptions(this.doctorId).then(res => {
        console.log("B端 我的药房 历史处方列表: ", res)
         this.cardList2 = res
      })
    },
    // 常用药品
    commonlyUsedDrugs()
    {
      this.myPharmacy = 1;
    },

    // 常用处方
    commonPrescription1()
    {
      this.myPharmacy = 2;
    },

    // 历史处方
    historicalPrescription()
    {
      this.myPharmacy = 3;
      this.getDataListOfHistoricalPrescriptions()
    },

    // 新建处方
    newPrescription() {
      this.$router.push({
        path: '/writeAPrescription',
        query: {
          id: this.$route.query.id
        }
      })
    },
    // 常用药品详情对象
    handleEdit($index, row) {
      alert("常用药品详情对象: " + row.restorativesId)
      detailsOfCommonDrugs().then(res =>{

      })
    },
    // 常用处方详情对象
    commonPrescription(patientId) {
      alert("常用处方详情对象: " + patientId)
    },
    // 历史处方详情对象
    HistoricalPrescription(id) {
      alert("历史处方详情对象: " + id)
    }

  }
}
</script>

<style scoped>
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #4169E1;
  color: white;
}
.nav-headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: white;
  color: #000000;
}


.card-left {
  flex: 1;
  margin-right: 40px; /* 增加左右内容间距 */
}
.card-item {
  background: #ffffff;
  border-radius: 12px; /* 增加圆角 */
  padding: 24px 32px; /* 增加内部间距 */
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 改为顶部对齐 */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: 160px; /* 设置最小高度 */
}
.card-list {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 增加卡片之间的间距 */
  max-width: 1200px; /* 增加最大宽度 */
  margin: 0 auto;
}
.card-desc {
  font-size: 16px; /* 增加描述文字字号 */
  color: #666;
  line-height: 1.6;
  min-height: 48px; /* 设置最小高度确保对齐 */
}
.card-info {
  display: flex;
  gap: 24px; /* 增加信息项间距 */
  margin-bottom: 20px; /* 增加描述下方间距 */
}
.info-item {
  font-size: 14px; /* 增加信息项字号 */
  color: #999;
  display: flex;
  align-items: center;
}
</style>


